<template>
  <form class="comment-form-inner" :id="'commentForm_'+domId">
    <input type="hidden" name="articleId" :value="articleId">
    <input type="hidden" name="commentId" :value="replyComment.id">
    <input type="hidden" name="creator" :value="commentator.id">
    <div class="input-group input-inline">
      <div class="input-item">
        <el-tooltip effect="dark" content="想让大家怎么称呼你呢" placement="top-start">
          <input placeholder="Name*" name="commentatorName" v-model="commentator.name" />
        </el-tooltip>
      </div>
      <div class="input-item">
        <el-tooltip effect="dark" content="保证不告诉别人~" placement="top-start">
          <input placeholder="Email" name="commentatorEmail" v-model="commentator.email" />
        </el-tooltip>
      </div>
      <div class="input-item">
        <el-tooltip effect="dark" content="尽量确保是个等比例的图片哦，大小尽量保持在500K内~" placement="top-start">
          <input placeholder="http://" name="commentatorAvatar" v-model="commentator.avatarUrl" />
        </el-tooltip>
      </div>
    </div>
    <div class="input-group input-inline">
      <div class="input-item input-block">
        <textarea :placeholder="(replyComment!=null&&replyComment.commentator)?'回复 @'+replyComment.commentator.name+':':'随便写点什么吧~'" name="commentContent"></textarea>
      </div>
    </div>
    <div class="input-group input-inline t-l">
      <div class="input-item input-block">
        <div class="highlight-btn-wrapper">
          <button type="button" class="highlight-btn highlight-btn-blue" @click="submitComment">发 射</button>
        </div>
        <el-popover placement="top" ref="popover" :width="410" trigger="click" popper-class="emoticon-box" @show="emoticonShow">
          <template #reference>
            <div class="highlight-btn-wrapper ml-10">
              <button type="button" class="highlight-btn highlight-btn-red">表情包</button>
            </div>
          </template>
          <div class="emoticon-container" :id="'emoticonContainer_'+domId">
            <ul class="emoticon-list" v-if="emoticons.length > 0">
              <template v-for="emoticon in emoticons" :key="emoticon">
                <li class="emoticon-item" @click="selectEmoticon(emoticon.id)">
                  <el-image :src="emoticon.imgUrl" lazy></el-image>
                </li>
              </template>
            </ul>
            <el-empty v-else description="暂未收录该类表情" :image-size="80"></el-empty>
          </div>
          <div class="emoticon-tab-box">
            <ul>
              <template v-for="(value,key) in emoticonSources" :key="key">
                <li class="emoticon-tab" :source="key" @click="loadingEmoticon(key)">{{value}}</li>
              </template>
            </ul>
          </div>
        </el-popover>
      </div>
    </div>
  </form>
</template>
<script>
  import Axios from '@/plugins/AxiosClient'
  import { ElLoading, ElTooltip, ElButton, ElMessage, ElPopover, ElImage, ElEmpty } from 'element-plus'
  import '@/assets/css/amazing-btn.scss'
  export default {
    components: {
      ElTooltip,
      ElButton,
      ElPopover,
      ElImage,
      ElEmpty
    },
    props: {
      replyComment: {
        type: Object
      },
      articleId: {
        type: String
      },
      domId: {
        type: String,
        required: true
      },
      commentSubmitCallBack: {
        type: Function,
        required: true
      },
      replySubmitCallBack: {
        type: Function,
        required: true
      }
    },
    data() {
      let loadingInstance = ElLoading.service({
        target: "#" + this.domId
      });
      Axios.get('/api/user-service/blogUser/whoAmI').then(resultData => {
        this.commentator = resultData;
        setTimeout(() => {
          loadingInstance.close();
        }, 1000);
      });
      Axios.get('/api/comment-service/emoticon/sources').then(resultData => {
        this.emoticonSources = resultData;
      });
      return {
        commentator: {},
        emoticonSources: [],
        emoticons: []
      }
    },
    methods: {
      submitComment() {
        let params = $("#commentForm_" + this.domId).serialize();
        let domId = this.domId;
        let replyComment = this.replyComment;
        let loadingInstance = ElLoading.service({
          target: "#" + domId
        });
        Axios.postParams('/api/comment-service/comment/submitComment', params).then(comment => {
          if (comment.commentId) {
            this.replySubmitCallBack(domId, comment, replyComment);
          } else {
            this.commentSubmitCallBack(domId, comment.id);
          }
          setTimeout(() => {
            loadingInstance.close();
          }, 1000);
        }).catch(() => {
          setTimeout(() => {
            loadingInstance.close();
          }, 1000);
        });
      },
      emoticonShow() {
        let domId = "#emoticonContainer_" + this.domId;
        let $emoticonBox = $(domId).parents(".emoticon-box");
        let $emoticonTab = $emoticonBox.find(".emoticon-tab-box");
        let source;
        if ($emoticonTab.find("li.emoticon-tab.active").length > 0) {
          source = $emoticonTab.find("li.emoticon-tab.active").attr('source');
        } else {
          source = $($emoticonTab.find("li.emoticon-tab")[0]).attr('source');
        }
        this.loadingEmoticon(source);
      },
      loadingEmoticon(source) {
        let domId = "#emoticonContainer_" + this.domId;
        let loadingInstance = ElLoading.service({
          target: domId
        });
        setTimeout(() => {
          loadingInstance.close();
        }, 1000);
        let popover = this.$refs[`popover`];
        let $commentBox = $("#" + popover.popperId);
        $commentBox.find(".emoticon-tab").removeClass("active");
        $commentBox.find(".emoticon-tab[source=" + source + "]").addClass("active");

        Axios.get('/api/comment-service/emoticon/getAllUsable', {
          source: source
        }).then(resultData => {
          this.emoticons = resultData;
        });
      },
      selectEmoticon(id) {
        this.$refs[`popover`].hide();
        let domId = "#emoticonContainer_" + this.domId;
        let $editor = $("#commentForm_" + this.domId).find("textarea");
        $editor.val($editor.val() + '#@' + id + '@#');
      }
    }
  }
</script>